<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    
</h:head>
<h:body>

<ui:decorate template="/template.xhtml">
    <ui:define name="content">
            
    <div class="navigation">

        <ul class="main">
            <li><a href="index.html" class="active"><span class="icom-screen"></span><span class="text">Main</span></a></li>
            <li><a href="#ui"><span class="icom-bookmark"></span><span class="text">UI elements</span></a></li>
            <li><a href="#forms"><span class="icom-pencil3"></span><span class="text">Forms stuff</span></a></li>
            <li><a href="#tables"><span class="icom-newspaper"></span><span class="text">Tables</span></a></li>
            <li><a href="#media"><span class="icom-videos"></span><span class="text">Media &amp; Files</span></a></li>            
            <li><a href="#stats"><span class="icom-stats-up"></span><span class="text">Statistic</span></a></li>
            <li><a href="typography.html"><span class="icom-clipboard1"></span><span class="text">Typography</span></a></li>
            <li><a href="#samples"><span class="icom-box-add"></span><span class="text">Samples</span></a></li>
            <li><a href="#other"><span class="icom-star1"></span><span class="text">Other</span></a></li>
        </ul>

        <div class="control"></div>        

        <div class="submain">

            <div id="default">

                <div class="widget-fluid userInfo clearfix">
                    <div class="image">
                        <img src="img/examples/users/dmitry.jpg" class="img-polaroid"/>
                    </div>              
                    <div class="name">Welcom, Dmitry</div>
                    <ul class="menuList">
                        <li><a href="#"><span class="icon-cog"></span> Settings</a></li>
                        <li><a href="#"><span class="icon-comment"></span> Messages</a></li>
                        <li><a href="#"><span class="icon-share-alt"></span> Logoff</a></li>                        
                    </ul>
                    <div class="text">
                        Welcom back! Your last visit: 24.10.2012 in 19:55
                    </div>
                </div>
                <div class="dr"><span></span></div>
                <ul class="fmenu">
                    <li>
                        <a href="#">Submenu level 2</a>                        
                    </li>
                    <li>
                        <a href="#">Submenu level 2</a>
                        <span class="caption blue">5</span>
                        <ul>
                            <li><a href="#">Submenu level 3</a><span class="caption">1</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption red">2</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption green">3</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption orange">4</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption purple">5</span></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Submenu level 2</a>                        
                    </li>                    
                </ul>
                <div class="dr"><span></span></div>
                <div class="menu">
                    <a href="#">Simple Submenu level 1</a>
                    <a href="#">Simple Submenu level 1</a>
                    <a href="#">Simple Submenu level 1</a>
                    <a href="#">Simple Submenu level 1</a>
                    <a href="#">Simple Submenu level 1</a>
                </div>       
                <div class="dr"><span></span></div>
                <div class="widget-fluid TAC">
                    <div class="kchart">
                        <input type="text" class="knob" data-min="1" data-max="100" value="35" data-width="90" data-height="90" data-fgColor="#b84b48" data-readOnly="true" data-bgColor="#f7f8fa"/>
                        <div class="label label-important">Free Space</div>
                    </div>                    
                    <div class="kchart">
                        <input type="text" class="knob" data-min="1" data-max="3000" value="1982" data-width="90" data-height="90" data-fgColor="#f89406" data-readOnly="true" data-bgColor="#f7f8fa"/>
                        <div class="label label-warning">Visits</div>
                    </div>                                               
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget">
                    <button class="btn btn-primary btn-block">Button block</button>
                </div>                
                <div class="widget">
                    <button class="btn btn-warning btn-block">Some another button</button>
                </div>
                <div class="dr"><span></span></div>
            </div>

            <div id="ui">                
                <div class="menu">
                    <a href="ui.html"><span class="icon-user"></span> Interface</a>
                    <a href="buttons.html"><span class="icon-chevron-right"></span> Buttons set</a>
                    <a href="widgets.html"><span class="icon-th-large"></span> Widgets</a>                    
                    <a href="icons.html"><span class="icon-fire"></span> Icons</a>
                    <a href="grid.html"><span class="icon-th"></span> Grid system</a>
                    <a href="dnd.html"><span class="icon-move"></span> Drug and drop</a>
                </div>                                
                <div class="dr"><span></span></div>                
                <div class="widget">
                    <button class="btn btn-primary btn-block">Button block</button>
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="accordion">
                        <h3>Section 1</h3>
                        <div>
                            <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
                        </div>
                        <h3>Section 2</h3>
                        <div>
                            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
                        </div>
                        <h3>Section 3</h3>
                        <div>
                            <ul>
                                <li>List item one</li>
                                <li>List item two</li>
                                <li>List item three</li>
                            </ul>                                
                            <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
                        </div>                            
                    </div>                
                </div>
                <div class="dr"><span></span></div>
                <div class="widget">
                    <span>Default:</span>
                    <div class="progress small progress-info">
                        <div class="bar tip" style="width: 30%;" data-original-title="30%"></div>
                    </div>                                
                    <span>Success:</span>
                    <div class="progress small progress-success">
                        <div class="bar tip" style="width: 50%;" data-original-title="50%"></div>
                    </div>
                    <span>Warning:</span>
                    <div class="progress small progress-warning">
                        <div class="bar tip" style="width: 70%;" data-original-title="70%"></div>
                    </div>       
                    <span>Danger:</span>
                    <div class="progress small progress-danger">
                        <div class="bar tip" style="width: 90%;" data-original-title="90%"></div>
                    </div>                                 
                </div>
                <div class="dr"><span></span></div>
            </div>            

            <div id="forms">                                                
                <div class="menu">
                    <a href="forms.html"><span class="icon-align-justify"></span> Form elements</a>
                    <a href="validation.html"><span class="icon-ok-sign"></span> Form validation</a>
                    <a href="wizard.html"><span class="icon-share"></span> Wizard</a>  
                    <a href="form_grid.html"><span class="icon-th"></span> Form grid system</a>
                    <a href="editor.html"><span class="icon-pencil"></span> Editors</a>
                    <a href="edit_image.html"><span class="icon-picture"></span> Image handling</a>
                </div>                                                                
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="row-form">
                        <span>Text:</span>
                        <input type="text" placeholder="Placeholder example"/>
                    </div>
                    <div class="row-form">
                        <input type="checkbox" checked="checked" value="1"/>Checked 
                        <input type="checkbox" value="2"/>Unchecked                         
                    </div>                    
                    <div class="row-form">                        
                        <select>
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>                    
                    <div class="row-form">
                        <span>Tags</span>
                        <input class="tags" value="PHP,CSS"/>
                    </div>
                    <div class="row-form">                        
                        <textarea name="text"></textarea>
                    </div>                    
                    <div class="row-form TAR">
                        <button class="btn btn-primary">Submit</button>
                    </div>
                </div>
                <div class="dr"><span></span></div>                
            </div>             

            <div id="tables">

                <div class="menu">
                    <a href="tables.html"><span class="icon-align-justify"></span> Default tables</a>
                    <a href="dynamic_tables.html"><span class="icon-ok-sign"></span> Dynamic tables</a>                          
                </div>                                                                
                <div class="dr"><span></span></div>                
                <div class="widget-fluid">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th width="30">ID</th>
                                <th>User</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>u-231</td>
                                <td><a href="#">Dmitry Ivaniuk</a></td>
                            </tr>
                            <tr>
                                <td>u-250</td>
                                <td><a href="#">Helen Symonchuk</a></td>
                            </tr>
                            <tr>
                                <td>u-256</td>
                                <td><a href="#">Olga Yukhimchuk</a></td>
                            </tr>                            
                            <tr>
                                <td>u-276</td>
                                <td><a href="#">Valentin Ratushev</a></td>
                            </tr>                                                        
                        </tbody>
                    </table>                    
                </div>
                <div class="dr"><span></span></div>                
                <div class="widget-fluid">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="checkall"/></th>
                                <th width="25%">ID</th>
                                <th width="75%">User</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-231</td>
                                <td><a href="#">Dmitry Ivaniuk</a></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-250</td>
                                <td><a href="#">Helen Symonchuk</a></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-256</td>
                                <td><a href="#">Olga Yukhimchuk</a></td>
                            </tr>                            
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-276</td>
                                <td><a href="#">Valentin Ratushev</a></td>
                            </tr>                                                        
                        </tbody>
                    </table>                    
                </div>  
                <div class="dr"><span></span></div>
            </div>  

            <div id="media">

                <div class="menu">
                    <a href="images.html"><span class="icon-picture"></span> Images</a>
                    <a href="videos.html"><span class="icon-film"></span> Videos</a>
                    <a href="files.html"><span class="icon-file"></span> File handling</a>                                                                             
                </div>         
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="head">File Tree</div>
                    <div id="fileTree"></div>
                </div>
                <div class="dr"><span></span></div>
            </div>                          

            <div id="stats">

                <div class="menu">
                    <a href="charts.html"><span class="icon-signal"></span> Charts</a>                    
                    <a href="chart_widgets.html"><span class="icon-star"></span> Chart widgets</a>                    
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget-fluid TAC">
                    <div class="kchart">
                        <input type="text" class="knob" data-min="1" data-max="100" value="85" data-width="90" data-height="90" data-fgColor="#b84b48" data-readOnly="true" data-bgColor="#f7f8fa"/>
                        <div class="label label-important">Server load</div>
                    </div>                    
                    <div class="kchart">
                        <input type="text" class="knob" data-min="1" data-max="1024" value="256" data-width="90" data-height="90" data-fgColor="#f89406" data-readOnly="true" data-bgColor="#f7f8fa"/>
                        <div class="label label-warning">Used RAM</div>
                    </div>                              
                </div>
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="row-fluid">
                        <div class="span6 TAC">
                            <span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkLineColor="#3f506a" sparkFillColor="#f7f8fa">1:3,2:4,3:3,3:4,4:2</span>
                        </div>
                        <div class="span6 TAC">
                            <span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="bar" sparkBarColor="#b84b48">5,6,4,6,5,4,5,6,8,5,6</span>
                        </div>
                    </div>
                </div>
                <div class="widget-fluid">    
                    <div class="row-fluid">
                        <div class="span6 TAC">
                            <span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="discrete" sparkLineColor="#f89406">5,6,4,6,5,4,5,6,8,5,6</span>
                        </div>
                        <div class="span6 TAC">
                            <span class="mChartBar" sparkType="bullet" sparkWidth="100" sparkHeight="30" sparkPerformanceColor="#3f506a" sparkTargetColor="#b84b48">10,12,12,9,7</span>
                        </div>
                    </div>                                        
                </div>
                <div class="dr"><span></span></div>
            </div>              

            <div id="samples">
                <div class="menu">
                    <a href="profile.html"><span class="icon-user"></span> User profile</a>
                    <a href="stream.html"><span class="icon-refresh"></span> Stream activity</a>
                    <a href="mailbox.html"><span class="icon-envelope"></span> Mailbox</a>
                    <a href="invoice.html"><span class="icon-list-alt"></span> Invoice</a>
                    <a href="gallery.html"><span class="icon-picture"></span> Gallery</a>
                    <a href="users.html"><span class="icon-align-justify"></span> Users list</a>
                    <a href="contacts.html"><span class="icon-book"></span> Contacts list</a>
                    <a href="faq.html"><span class="icon-question-sign"></span> FAQ</a>
                </div>                
                <div class="dr"><span></span></div>
            </div>

            <div id="other">
                <div class="menu">
                    <a href="login.html"><span class="icon-off"></span> Login page</a>
                    <a href="error_403.html"><span class="icon-warning-sign"></span> Error 403 Forbidden</a>
                    <a href="error_404.html"><span class="icon-warning-sign"></span> Error 404 Not found</a>
                    <a href="error_503.html"><span class="icon-warning-sign"></span> Error 503 Service Unavailable</a>                
                </div>
                <div class="dr"><span></span></div>
                <div class="widget">
                    <div class="alert alert-block">                
                        <strong>Alert block!</strong> Click me!:P
                    </div>
                    <div class="alert alert-error">            
                        <strong>Oh snap!</strong> Change a few... 
                    </div>
                    <div class="alert alert-success">            
                        <strong>Well done!</strong> Successfully...
                    </div>            
                    <div class="alert alert-info">            
                        <strong>Heads up!</strong> This alert...
                    </div>                  
                </div>
            </div>            

        </div>

    </div>

    <div class="content">

        <div class="row-fluid">

            <div class="span8">
                
                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><span class="icos-calendar"></span></div>
                        <h2>Visitors</h2>
                        <ul class="buttons">                            
                            <li><a href="#"><span class="icos-refresh"></span></a></li>
                            <li><a href="#"><span class="icos-history"></span></a></li>
                            <li><a href="#"><span class="icos-flag1"></span></a></li>
                        </ul>                         
                    </div>
                    <div class="toolbar">
                        <div class="left TAL">                                                        
                            <div class="input-prepend input-append">
                                <span class="add-on"><i class="icon-calendar"></i></span>
                                <input type="text" id="datepicker" value="2013-01-31"/>                                
                                <button class="btn">Show</button>                                    
                            </div>                            
                        </div>
                        <div class="right TAR">
                            <button class="btn">Today</button>     
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button type="button" class="btn">Week</button>
                                <button type="button" class="btn">Month</button>
                                <button type="button" class="btn active">Year</button>                            
                            </div>           
                        </div>
                    </div>
                    <div class="block white">
                        <div id="main_chart" style="height: 300px;"></div>
                    </div>
                    <div class="toolbar-fluid">
                        <div class="information">
                            <div class="item">
                                <div class="rates">
                                    <div class="title">2,145</div>
                                    <div class="description">Visits</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="rates">
                                    <div class="title">648</div>
                                    <div class="description">Unique</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="rates">
                                    <div class="title">143</div>
                                    <div class="description">Sales</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="rates">
                                    <div class="title">$14,329</div>
                                    <div class="description">Money</div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                </div>

                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-stats-up"></i></div>
                        <h2>Latest Orders</h2>
                        <ul class="buttons">                            
                            <li><a href="#"><span class="icos-pencil2"></span></a></li>
                            <li><a href="#"><span class="icos-cog"></span></a></li>
                        </ul>                         
                    </div>                
                        <div class="block-fluid">
                            <table class="table table-hover" cellpadding="0" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" class="checkall"/></th>
                                        <th width="25%">Name</th>
                                        <th width="20%">Product</th>
                                        <th width="20%">Status</th>
                                        <th width="20%">Date</th>
                                        <th width="15%" class="TAC">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="order[]" value="528"/></td>
                                        <td><a href="#">Dmitry Ivaniuk</a></td>
                                        <td>Product #212</td>
                                        <td><span class="label label-important">New</span></td>
                                        <td>24/11/2012</td>
                                        <td class="TAC">
                                            <a href="#"><span class="icon-ok"></span></a> 
                                            <a href="#"><span class="icon-pencil"></span></a> 
                                            <a href="#"><span class="icon-trash"></span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="order[]" value="527"/></td>
                                        <td><a href="#">John Doe</a></td>
                                        <td>Product #132</td>
                                        <td><span class="label label-important">New</span></td>
                                        <td>24/11/2012</td>
                                        <td class="TAC">
                                            <a href="#"><span class="icon-ok"></span></a> 
                                            <a href="#"><span class="icon-pencil"></span></a> 
                                            <a href="#"><span class="icon-trash"></span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="order[]" value="526"/></td>
                                        <td><a href="#">Alex Fruz</a></td>
                                        <td>Product #53</td>
                                        <td><span class="label label-important">New</span></td>
                                        <td>23/11/2012</td>
                                        <td class="TAC">
                                            <a href="#"><span class="icon-ok"></span></a> 
                                            <a href="#"><span class="icon-pencil"></span></a> 
                                            <a href="#"><span class="icon-trash"></span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="order[]" value="525"/></td>
                                        <td><a href="#">Olga Yukhimchuk</a></td>
                                        <td>Product #874</td>
                                        <td><span class="label label-info">Pending</span></td>
                                        <td>23/11/2012</td>
                                        <td class="TAC">
                                            <a href="#"><span class="icon-ok"></span></a> 
                                            <a href="#"><span class="icon-pencil"></span></a> 
                                            <a href="#"><span class="icon-trash"></span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="order[]" value="524"/></td>
                                        <td><a href="#">Angelina Rose</a></td>
                                        <td>Product #533</td>
                                        <td><span class="label label-info">Pending</span></td>
                                        <td>23/11/2012</td>
                                        <td class="TAC">
                                            <a href="#"><span class="icon-ok"></span></a> 
                                            <a href="#"><span class="icon-pencil"></span></a> 
                                            <a href="#"><span class="icon-trash"></span></a>
                                        </td>
                                    </tr>                            
                                </tbody>
                            </table>                    
                        </div> 
                </div>                
                <div class="widget">
                    <div class="block-fluid">
                        <div id="main_calendar"></div>
                    </div>            
                </div>

            </div>

            <div class="span4">
                
               <div class="middle">

                    <div class="button">
                        <a href="#">
                            <span class="icomg-earth"></span>
                            <span class="text">Quick Navigation</span>
                        </a>
                        <ul class="sub">
                            <li><a href="/" class="tip" title="Dashborad"><span class="icon-home"></span></a></li>
                            <li><a href="ui.html" class="tip" title="UI"><span class="icon-user"></span></a></li>
                            <li><a href="grid.html" class="tip" title="Grid"><span class="icon-th"></span></a></li>
                            <li><a href="widgets.html" class="tip" title="Widgets"><span class="icon-th-large"></span></a></li>
                            <li><a href="buttons.html" class="tip" title="Buttons"><span class="icon-chevron-right"></span></a></li>
                            <li><a href="icons.html" class="tip" title="Icons"><span class="icon-fire"></span></a></li>
                            <li><a href="http://google.com/" class="tip" title="Google" target="_blank"><span class="icon-globe"></span></a></li>
                            <li><a href="http://youtube.com/" class="tip" title="Youtube" target="_blank"><span class="icon-globe"></span></a></li>
                        </ul>
                    </div>

                    <div class="button">
                        <a href="#">
                            <span class="icomg-user2"></span>
                            <span class="text">Users Actions</span>
                        </a>
                        <ul class="sub">
                            <li><a href="users.html" class="tip" title="Show list"><span class="icon-th-list"></span></a></li>
                            <li><a href="ui.html" class="tip" title="Add new"><span class="icon-plus"></span></a></li>                        
                            <li><a href="#" class="tip" title="Registrations"><span class="icon-ok"></span></a></li>
                            <li><a href="#" class="tip" title="Send mail"><span class="icon-envelope"></span></a></li>
                            <li><a href="#" class="tip" title="Top users"><span class="icon-star"></span></a></li>
                            <li><a href="#" class="tip" title="Users activity"><span class="icon-signal"></span></a></li>
                            <li><a href="#" class="tip" title="Last comments"><span class="icon-comment"></span></a></li>
                        </ul>
                    </div>                

                </div>                

                <div class="middle">
                    <div class="informer">
                        <a href="#">
                            <span class="title">2/1,981</span>
                            <div class="progress small progress-striped">
                                <div class="bar tip" style="width: 58%;" title="Used 58%"></div>
                            </div>   
                        </a>
                        <span class="caption tip" title="Spam">341</span>
                    </div>                                        
                    <div class="informer">
                        <a href="#">
                            <span class="title">$2,534</span>
                            <span class="text">Balance</span>
                        </a>
                        <span class="caption red">-$135</span>
                    </div>                                                                            
                </div>                                  
                
                <div class="widget"> 
                    <div class="head dark">
                        <div class="icon"><i class="icos-star3"></i></div>
                        <h2>Tasks</h2>
                        <ul class="buttons">                                                        
                            <li>
                                <a href="#"><span class="icos-plus1"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Add new</a></li>
                                    <li><a href="#">Upload</a></li>
                                    <li><a href="#">Search</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Clear folder</a></li>
                                </ul>                                
                            </li>
                        </ul>                          
                    </div>                    
                    <div class="toolbar">
                        <div class="left">
                            <div class="btn-group">
                                <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Action with selected</button>                            
                                <ul class="dropdown-menu">
                                    <li><a href="#">New</a></li>
                                    <li><a href="#">Done</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Add to archive</a></li>
                                    <li><a href="#">Remove</a></li>                                                                                                
                                </ul>
                            </div>                            
                        </div>
                        <div class="right TAR">
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button type="button" class="btn btn-mini active">All</button>
                                <button type="button" class="btn btn-mini">New</button>
                                <button type="button" class="btn btn-mini">Done</button>                                
                            </div>           
                        </div>
                    </div>
                    <div class="block-fluid tasks">
                        <div class="item new">
                            <input type="checkbox" name="task[]"/> <span class="label label-success">new</span> Buy on themeforest this great template! <span class="added">Added by Dmitry Ivaniuk</span>
                        </div>
                        <div class="item new">
                            <input type="checkbox" name="task[]"/> <span class="label label-success">new</span> Go to shop and buy beer! <span class="added">Added by Dmitry Ivaniuk</span>
                        </div>                        
                        <div class="item done">
                            <input type="checkbox" name="task[]" checked="checked"/> <span class="label label-warning">done</span> Don't forget to update this template! <span class="added">Added by Dmitry Ivaniuk</span>
                        </div>                                                
                        <div class="item done">
                            <input type="checkbox" name="task[]" checked="checked"/> <span class="label label-warning">done</span> No time to explain, get on the horse! <span class="added">Added by Dmitry Ivaniuk</span>
                        </div>
                        <div class="item">
                            <input type="checkbox" name="task[]"/> <span class="label label-info">archive</span> Buy something for my dog! <span class="added">Added by Dmitry Ivaniuk</span>
                        </div>                        
                    </div>  
                    <div class="toolbar">
                        <div class="left">
                            <div class="btn-group">
                                <button class="btn dropdown-toggle" data-toggle="dropdown">Action with selected</button>                            
                                <ul class="dropdown-menu">
                                    <li><a href="#">New</a></li>
                                    <li><a href="#">Done</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Add to archive</a></li>
                                    <li><a href="#">Remove</a></li>                                                                                                
                                </ul>
                            </div>                         
                        </div>
                        <div class="right TAR">
                            <div class="pagination pagination-mini">
                                <ul>                                    
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>                                                        
                                </ul>
                            </div>
                        </div>
                    </div>                    
                </div>                               
                
                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-tag"></i></div>
                        <h2>Tickets</h2>
                        <ul class="buttons">                                                        
                            <li><a href="#"><span class="icos-cog"></span></a></li>
                        </ul>                          
                    </div>
                    
                    <div class="block-fluid">

                        <ul class="list tickets">
                            <li class="new clearfix" id="T212">
                                <div class="title">
                                    <a href="#">Product info</a>
                                    <p>Promble with order of pictures...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                    <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                                </div>
                            </li>
                            <li class="accept clearfix" id="T213">
                                <div class="title">
                                    <a href="#">Request backup</a>
                                    <p>Plese send me backup from 24/11/2012...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                    <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                                </div>
                            </li>
                            <li class="accept clearfix" id="T214">
                                <div class="title">
                                    <a href="#">Sign in button</a>
                                    <p>Doesnt send post requset to server...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                    <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                                </div>
                            </li>
                            <li class="done clearfix" id="T215">
                                <div class="title">
                                    <a href="#">Send email using HTML</a>
                                    <p>Some characters are deleted from the template...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                    <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                                </div>
                            </li>                        
                            <li class="done clearfix" id="T216">
                                <div class="title">
                                    <a href="#">Print form</a>
                                    <p>When you click on "print form" it displays an error...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                    <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                                </div>
                            </li>                                                    
                        </ul>                        
                        
                    </div>                    
                </div>                               
                
                <div class="widget">
                    
                    <div class="head dark">
                        <div class="icon"><i class="icos-comments2"></i></div>
                        <h2>Messaging</h2>      
                        <ul class="buttons">                                                        
                            <li><a href="#"><span class="icos-plus1"></span></a></li>
                        </ul>                                                  
                    </div>
                    <div class="toolbar">
                        <div class="user">
                            <img src="img/examples/users/dmitry_m.jpg" class="img-polaroid"/> <a href="#">Dmitry</a>
                        </div>
                        <div class="user">
                            <img src="img/examples/users/alexey_m.jpg" class="img-polaroid"/> <a href="#">Alex</a>
                        </div>                            
                    </div>
                    <div class="block messaging">                        
                        
                        <div class="item">
                            <div class="image">                                
                                <img src="img/examples/users/dmitry.jpg" class="img-polaroid"/>
                            </div>           
                            <div class="date">20:43</div>
                            <div class="text">
                                <a href="#">Dmitry</a>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                            </div>                            
                        </div>                         

                        <div class="item out">
                            <div class="image">
                                <img src="img/examples/users/alexey.jpg" class="img-polaroid"/>
                            </div>                            
                            <div class="date">20:30</div>
                            <div class="text">
                                <a href="#">Alex</a>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                            </div>                            
                        </div>
                        
                        <div class="item">
                            <div class="image">
                                <img src="img/examples/users/dmitry.jpg" class="img-polaroid"/>
                            </div>                            
                            <div class="date">20:10</div>
                            <div class="text">
                                <a href="#">Dmitry</a>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                            </div>                            
                        </div>                        
                        
                    </div>
                    <div class="toolbar bottom">
                        <div class="input-append input-prepend">
                            <button class="btn tip" title="Add photo" type="button"><span class="icon-picture"></span></button>
                            <button class="btn tip" title="Add video" type="button"><span class="icon-film"></span></button>
                            <input type="text"/>
                            <button class="btn btn-primary" type="button">Send</button>
                        </div>
                    </div>
                </div>                
                
            </div>            

        </div>

    </div>  

    <div id="fcAddEvent" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="fcAddEventLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="fcAddEventLabel">Add new event</h3>
        </div>
        <div class="modal-body">
            <div class="row-fluid">
                <div class="span3">Title:</div>
                <div class="span9"><input type="text" id="fcAddEventTitle"/></div>
            </div>
        </div>
        <div class="modal-footer">            
            <button class="btn btn-primary" id="fcAddEventButton">Add</button>            
        </div>
    </div>
    
    </ui:define>
</ui:decorate>

</h:body>
</html>